<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套关系外边距合并</title>
    <style>
       .outer{
           width: 500px;
           height: 500px;
           background-color: red;
           /* 解决方案1：给外部元素定义上边框 */
           /* border-top: 1px solid transparent; */

           /* 解决方案2：可以给外部元素指定一个padding值 */
           /* padding-top: 1px; */

           /* 解决方案3：可以为父元素添加overflow：hidden */
           /* 最完美的方案 */
           overflow: hidden;
       }
       

       .inner{
           width: 200px;
           height: 200px;
           background-color: limegreen;
           /* 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，
           父元素的上外边距会与子元素的上外边距发生合并。合并后的外边距为两者中的较大者。 */
           margin-top: 100px;
       }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>